import { useState } from "react"

function App() {
  const username = useUpdateInput('')
  const password = useUpdateInput('')

  const submitForm = event => {
    event.preventDefault()
    console.log(username.value)
    console.log(password.value)
  }
  return <form onSubmit={submitForm}>
    <input type="text" name="username" {...username}></input>
    <input type="password" name="password" {...password}></input>
    <input type='submit'></input>
  </form>
}

function useUpdateInput(initialValue) {
  const [value, setValue] = useState(initialValue)
  return {
    value,
    onChange: event => setValue(event.target.value)
  }
}

export default App